<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html {
        font-size: 17px;
      }

      body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
      }

      .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: absolute;
        top: 40%;
        left: 0;
        width: 100%;
        transform: translateY(-50%);
      }
      
      .login-name {
        width: 100%;
        padding-right: 30px;
        text-align: right;
        margin-bottom: 30px;
        font-size: 0.9em;
        color: #aaaaaa;
        box-sizing: border-box;
      }

      .icon {
        margin: 30px auto;
      }

      h2 {
        font-size: 1.5rem;
        margin: 8px 0;
      }

      p {
        font-size: 1rem;
        margin: 8px 0;
      }

      span.code {
        font-size: 1.2rem;
        font-family: monospace;
        font-weight: bold;
      }
    </style>
    <title>优惠券已被兑换过</title>
  </head>
  <body>
    <div class="content">
      <div class="login-name">
        <h5>已核销商家：<span th:text="${exchange_store}"></span></h5>
        <h5>当前登录商家：<span th:text="${login_store}"></span></h5>
      </div>
      <h2 th:text="${couponName}"></h2>
      <h2 th:text="${usedMsg}">已被兑换过！</h2>
      <div class="icon">
        <svg
          id="a"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512"
          width="200"
          height="200"
        >
          <defs>
            <style>
              .b {
                fill: #fff;
              }
              .c {
                fill: #ffb829;
              }
              .d {
                fill: none;
                stroke: #fff;
                stroke-linecap: round;
                stroke-linejoin: round;
                stroke-width: 18px;
              }
            </style>
          </defs>
          <circle class="c" cx="256" cy="256" r="256" />
          <g>
            <line class="d" x1="256" y1="296.12" x2="256" y2="131.31" />
            <circle class="b" cx="256" cy="362.18" r="18.43" />
          </g>
        </svg>
      </div>
      <p>核销码：<span class="code" th:text="${checkCode}"></span></p>
      <p class="message" th:text="${useTime}"></p>
    </div>
  </body>
</html>
